<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>按钮的大小</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../js/lib/bootstrap/dist/css/bootstrap.min.css">
  <style>
    pre {
      /*color: #c7254e;*/
    }  
  </style>
</head>
<body>

	<div class="container">
    <h1>按钮的大小</h1>
    <pre>
      1. .btn 按钮的基本样式
      2. .btn-lg 大按钮
      3. .btn-sm 小按钮
      4. .btn-xs 特小按钮
      5. .btn-block 块级按钮(100%占满父元素的宽度)
    </pre>
    <p>
      <button class="btn btn-primary btn-lg" type="button">大按钮</button>
    </p>
    <p>
      <button class="btn btn-primary" type="button">默认按钮</button>
    </p>
    <p>
      <button class="btn btn-primary btn-sm" type="button">小按钮</button>
    </p>
    <p>
      <button class="btn btn-primary btn-xs" type="button">特小按钮</button>
    </p>
    <p>
      <button class="btn btn-primary btn-block" type="button">块级按钮</button>
    </p>             
  </div>

  <script src="../../js/lib/jquery/dist/jquery.min.js"></script>
  <script src="../../js/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>